<template>
    <div class="myFollow-container">
        <!-- 面包屑 -->
        <Breadcrumb>
            <BreadcrumbItem to="/userHome">个人中心</BreadcrumbItem>
            <BreadcrumbItem>我的关注</BreadcrumbItem>
        </Breadcrumb>
        <!-- 如果数据为空时两个tab栏分别显示 -->
        <!-- 如果数据不为空时显示 -->
        <div class="myFollow-info">
            <Tabs value="name1">
                <!-- 关注列表 -->
                <TabPane label="关注" name="name1">
                    <div class="myFollow-list" v-if="followList==''">
                        <a-empty style="padding-top:70px;"></a-empty>
                    </div>
                    <div class="myFollow-list" v-if="followList">
                        <div class="myFollow-item" v-for="(item, i) in followList" :key="i">
                            <div class="item-left">
                                <router-link :to="'/userInfo/' + item.users.uId"><img :src="item.users.uAvatar" alt=""></router-link>
                                <div class="userinfo">
                                    <router-link :to="'/userInfo/' + item.users.uId">{{item.users.uName}}</router-link>
                                    <p>{{item.fCreateTime | dataFormat}}</p>
                                </div>
                            </div>
                            <div class="item-right">
                                <a href="#" @click.prevent="deleteById(item.fId)">取消关注</a>
                            </div>
                        </div>
                        <!-- <div class="myFollow-item">
                            <div class="item-left">
                                <router-link to="/"><img src="../../../assets/imgs/bg00.jpg" alt=""></router-link>
                                <div class="userinfo">
                                    <router-link to="/">昵称</router-link>
                                    <p>时间</p>
                                </div>
                            </div>
                            <div class="item-right">
                                <a href="#">已关注</a>
                            </div>
                        </div> -->
                    </div>
                </TabPane>
                <!-- 粉丝列表 -->
                <TabPane label="粉丝" name="name2">
                    <div class="myFollow-list" v-if="fansList==''">
                        <a-empty style="padding-top:70px;"></a-empty>
                    </div>
                    <div class="myFollow-list" v-if="fansList">
                        <div class="myFollow-item" v-for="(item, i) in fansList" :key="i">
                            <div class="item-left">
                                <router-link :to="'/userInfo/' + item.uId"><img :src="item.uAvatar" alt=""></router-link>
                                <div class="userinfo">
                                    <router-link  :to="'/userInfo/' + item.uId">{{item.uName}}</router-link>
                                    <p>{{item.uCreateTime | dataFormat}}</p>
                                </div>
                            </div>
                            <div class="item-right">
                                <span>已关注</span>
                            </div>
                        </div>
                    </div>
                </TabPane>
            </Tabs>
        </div>
    </div>
</template>

<script>
export default {
  name: 'myFollow',
  data () {
    return {
      followList: [], // 关注列表
      fansList: [] // 粉丝列表
    }
  },
  created () {
    this.findByCurrId()
    this.findByUserId()
  },
  methods: {
    // 根据当前登录用户id查看关注的用户列表
    findByCurrId () {
      this.$axios({
        url: 'follow/findByCurrId/' + JSON.parse(localStorage.getItem('user')).uId,
        method: 'get',
        headers: {
          Authorization: localStorage.getItem('token')
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.followList = res.data.list
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 根据关注用户id查找粉丝列表
    findByUserId () {
      this.$axios({
        url: 'follow/findByUserId/' + JSON.parse(localStorage.getItem('user')).uId,
        method: 'get',
        headers: {
          Authorization: localStorage.getItem('token')
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.fansList = res.data.list
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 取消关注
    deleteById (id) {
      this.$axios({
        url: 'follow/deleteById/' + id,
        method: 'get',
        headers: {
          Authorization: localStorage.getItem('token')
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.findByCurrId()
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 增加关注
    save (id) {
      this.$axios({
        url: 'follow/save/',
        method: 'post',
        params: {
          fUid: id,
          fCurrentUid: JSON.parse(localStorage.getItem('user')).uId
        },
        headers: {
          Authorization: localStorage.getItem('token')
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.findByUserId()
        }
      }).catch(error => {
        console.log(error)
      })
    }
  }
}
</script>

<style scoped>
.myFollow-container {
    min-height: 480px;
}
.myFollow-info {
    margin-top: 50px;
}
.myFollow-item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e8eaec;
    padding: 10px;
}
.item-left {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.item-left img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
}
.userinfo p {
    margin-bottom: 0;
    font-size: 12px;
}
.item-right a {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 20px;
    color: #515a6e;
    border: 1px solid #515a6e;
    font-size: 12px;
}
</style>
